<script>
/**后端文档格式：
 * 更新后文档：{
  _id: new ObjectId('68d379e20a3799724ebd1429'),
  id: 1758689762216,
  title: '强强强强强强强强强强强强',
  body: '强强强强强强强强强强q',
  categories: [],
  __v: 0
}
 */

import axios from 'axios'
import { handleError } from 'vue'
axios.defaults.baseURL = 'http://127.0.0.1:3001'
export default {
    data() {
        return {
            blogs: [],
            //分页
            page: {
                current: 1,
                size: 2,
                total: 0
            },
    }
},
directives:{
    color:{
        mounted(el){
            el.style.color = '#'+Math.random().toString(16).slice(2, 8)
            el.style.padding = '25px'

        }
    }
},
created() {
    this.pageInation()
},
methods: {
    handleChange(val){
        console.log(val)
    } ,
    fetch(){
        this.page.current = 1
        this.pageInation()
    },
    //删除
    deleteBlog(id) {
        axios.delete('/blog/' + id).then(res => {
            this.$message({
                type:'success',
                message: '博客删除成功'
            })
            this.fetch()
            })
    },
    //编辑
    editBlog(id) {
        this.$router.push(`/blog/edit/${id}`)
    },
    //全局浏览
    viewBlog(id) {
        this.$router.push(`/blog/view/${id}`)
    },
    //分页
    pageInation() {
        let that=this
        axios.get("/blog/page?currentPage="+this.page.current+"&pageSize="+this.page.size
          
        ).then(res => {
            if(res.data.data==null || res.data.data.length==0){
            that.page.current=that.page.current-1
             that.pageInation()
            }else{
            this.blogs = res.data.data
            this.page.total = res.data.total
        }
        }).catch(handleError)
    },
    currentChange(val) {
        console.log(val)
        this.page.current = val
        this.pageInation()
    },
    
    //获取当前时间
    getYMDHMS(date) {
        let dateObj = new Date(date)
        const year = dateObj.getFullYear()
        const month = (dateObj.getMonth() + 1 + '').padStart(2, '0')    
        const day = (dateObj.getDate() + '').padStart(2, '0')
        const hour = (dateObj.getHours() + '').padStart(2, '0')
        const minute = (dateObj.getMinutes() + '').padStart(2, '0')
        const second = (dateObj.getSeconds() + '').padStart(2, '0')
        return `${year}-${month}-${day} ${hour}:${minute}:${second}`

    }
}}
</script>
<template>
    <div id="blogs" v-for="item in blogs" :key="item.id">
        <div class="singleBlog"> 
        <h2 v-color>{{ item.title }}</h2>
        <p class="body">{{ item.body.substr(0, 100) + '...' }}</p>
        <div class="read">
        <button @click.prevent="deleteBlog(item._id)">删除</button>
        <button @click.prevent="editBlog(item._id)">编辑</button>
        <button @click.prevent="viewBlog(item._id)">全局浏览</button>
        </div>
            <p class="date">发表于{{ getYMDHMS(item.id) }}</p>
        </div>
    </div>
    <!-- 页面底部分页栏 -->
     <div class="page-bar" float="left" style="font-size: 12px; color:#999;padding-left:20px;">一共有{{ page.total }}条记录</div>

     <div class="block" style="text-align: right;margin-top: 10px;">
        <el-pagination
          @size-change="SizeChange"
          @current-change="currentChange"
          :current-page="page.current"
          :page-size="page.size"
          layout=" prev, pager, next"
          :total="page.total">
</el-pagination>
     </div>
</template>
<style>
.date{
    text-align: right;
}
</style>